<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">器材基础信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="器材名称">{{
              datas?.equipment?.name
            }}</a-descriptions-item>
            <a-descriptions-item label="器材型号">
              {{ datas?.equipment?.model }}
            </a-descriptions-item>
            <a-descriptions-item label="资产编号">{{
              datas?.customer_equipment.asset_no
            }}</a-descriptions-item>
            <a-descriptions-item label="品牌">{{
              datas?.equipment?.brand
            }}</a-descriptions-item>
            <a-descriptions-item label="器材编号">{{
              datas?.customer_equipment?.equipment_no
            }}</a-descriptions-item>
            <a-descriptions-item label="器材分类">{{
              datas?.equipment?.equipment_category_name
            }}</a-descriptions-item>
            <a-descriptions-item label="入库时间">{{
              datas?.customer_equipment?.created
            }}</a-descriptions-item>
            <a-descriptions-item label="保修状态">{{
              datas?.warranty_status
            }}</a-descriptions-item>
            <a-descriptions-item label="截止日期">{{
              datas?.warranty_end_date
            }}</a-descriptions-item>
            <a-descriptions-item label="使用地点">{{
              datas?.customer_equipment?.location
            }}</a-descriptions-item>
            <a-descriptions-item label="设备状态">{{
              datas?.customer_equipment?.enabled ? "启用" : "禁用"
            }}</a-descriptions-item>
            <a-descriptions-item label="报修二维码">
              <div class="qrcode-wrapper" v-if="qrCodeData">
                <img
                  :src="qrCodeData"
                  alt=""
                  style="width: 100px; height: 100px"
                />
                <a-button class="btn" @click="handleDownCode">下载二维码</a-button>
              </div>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import qrcode from "qrcode";
import api from "@/api";
const route = useRoute();
const query = computed(() => route.query);

const datas = ref();
const qrcodeUrl = ref("");
const getData = async () => {
  let params = {
    order_equipment_id: query.value.id,
  };
  const res = await api.apiOrderEquipmentFetchModelPost(params);
  datas.value = res.data;
  qrcodeUrl.value =
    "https://lib.fantasy-lab.com/m/#/pages/repair/index?order_equipment_id=" +
    datas.value.order_equipment_id;
  console.log(111, qrcodeUrl.value);
  await createQrcode();
};
const qrCodeData = ref("");
const createQrcode = () => {
  qrcode.toDataURL(qrcodeUrl.value, (err, url) => {
    if (err) {
      console.error(err);
    } else {
      console.log(url, "二维码生成成功");
      qrCodeData.value = url;
    }
  });
};
const handleDownCode = () => {
  const a = document.createElement("a");
  a.href = qrCodeData.value;
  a.download = "二维码";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};
onMounted(async () => {
  await getData();
});
</script>
<style lang="less">
.qrcode-wrapper {
  display: flex;
  align-items: center;
}
</style>
